﻿<!DOCTYPE html>
<html>
<head>
  <title>跨年倒计时</title>
  <style>
    body {
      background-color: black;
      color: white;
      font-family: Arial, sans-serif;
      text-align: center;
      padding-top: 100px;
    }

    h1 {
      font-size: 3em;
      margin-bottom: 0;
    }

    p {
      font-size: 2em;
    }
    p1{
      font-size: 2em;
    }
    #countdown {
      font-size: 60px;
      text-align: center;
      margin-top: 60px;
    }
    .firework {
            width: 10px;
            height: 10px;
            background-color:red;
            position: absolute;
            border-radius: 50%;
            animation: explode 1s infinite;
        }
        @keyframes explode {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(5);
            }
        }
  </style>
</head>
  <h1>倒计时跨年</h1>
  <p>2023年即将结束,2024即将到来</p>
  <p1>过去的是岁月，未来的是希望，让我们在新的一年里继续前行，跨年快乐！</p1>
  <div id="countdown"></div>

  <script>
    // 获取当前时间
    var now = new Date();

    // 设置跨年的日期
    var newYear = new Date(now.getFullYear() + 1, 0, 1);

    // 计算时间差
    var timeLeft = newYear - now;

    // 将时间差转换为天、小时、分钟和秒
    var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

    // 更新倒计时的元素内容
    var countdownElement = document.getElementById("countdown");
    countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
    
    // 每秒更新一次倒计时
    setInterval(function() {
      now = new Date();
      timeLeft = newYear - now;
      days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
      seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
      countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
       if (timeLeft <100000000000000000) {
                clearInterval(countdown);
                document.getElementById("countdown").innerHTML = "Happy New Year！Chen！";
            }
    }, 1000);
   function createFirework() {
            var firework = document.createElement('div');
            firework.className = 'firework';
            firework.style.left = Math.random() * 100 + "%";
            firework.style.top = Math.random() * 100 + "%";
            document.body.appendChild(firework);
        }
        
        setInterval(createFirework, 200);
  </script>
</body>
</html>